<script setup>
import {ref, watch} from "vue";
import {getInsureComponyList} from "@/api/insure/longTerm";
import {Delete} from "@element-plus/icons-vue";
import {getpassedcompanyapi, queryServeCompanyListApi} from "@/api/api";

const selectProps = {
    multiple: true,
    checkStrictly: true,
}
const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
})
const obj = ref({
    insurCompany: '',
    companyWhitelist: [],
    serveCompanyWhitelist: [],
    needAddCompanyWhitelist: [],
    needAddServiceCompanyWhitelist: []
})
const companylist = ref([])
const serviceCompanylist = ref([])
const loading = ref(false)
const emits = defineEmits(['success', 'update:show'])
const dialogVisible = ref(false);
const insureCompanyList = ref([]);
const changeCompanyName = () => {
    let arr = []
    obj.value.needAddCompanyWhitelist.forEach(ele => {
        arr.push({companyId: ele.id, companyName: ele.companyName})
    })
    obj.value.companyWhitelist = arr
}
const changeServiceCompanyName = () => {
    let arr = []
    obj.value.needAddServiceCompanyWhitelist.forEach(ele => {
        arr.push({companyId: ele.companyId, companyName: ele.companyName})
    })
    obj.value.serveCompanyWhitelist = arr
}
const delCompanyWhite = (item) => {
    obj.value.needAddCompanyWhitelist = obj.value.needAddCompanyWhitelist.filter(ele => {
        return ele.companyId !== item.companyId
    })
    changeCompanyName()

}
const delServiceCompanyWhite = (item) => {
    obj.value.needAddServiceCompanyWhitelist = obj.value.needAddServiceCompanyWhitelist.filter(ele => {
        return ele.companyId !== item.companyId
    })
    changeServiceCompanyName()
}
const submit = () => {
    if (!obj.value.insurCompany) {
        ElMessage.error('请选择保司')
        return;
    }
    if (obj.value.companyWhitelist.length === 0 && obj.value.serveCompanyWhitelist.length === 0) {
        ElMessage.error('请选择公司或派遣单位')
        return;
    }
    emits('success', obj.value)
    emits('update:show', false)
    dialogVisible.value = false
}
const remoteMethod = (query) => {
    if (query) {
        loading.value = true
        getCompany(query)
    } else {
        companylist.value = []
    }
}
// 获取公司列表
const getCompany = async (val) => {
    companylist.value = await getpassedcompanyapi({companyName: val, auditStatus: 1})
    companylist.value.forEach((i) => {
        i.companyId = i.id
    })
    loading.value = false
}
const remoteMethodServiceCompany = (query) => {
    if (query) {
        loading.value = true
        getServiceCompany(query)
    } else {
        serviceCompanylist.value = []
    }
}
// 获取派遣单位列表
const getServiceCompany = async (val) => {
    serviceCompanylist.value = await queryServeCompanyListApi({serveCompanyName: val})
    serviceCompanylist.value.forEach((i) => {
        i.companyId = i.serveCompanyId
        i.companyName =
            i.serveCompanyName + '(' + i.companyName + ')'
    })
    loading.value = false
}
const init = () => {
    obj.value = {
        insurCompany: '',
        companyWhitelist: [],
        serveCompanyWhitelist: [],
        needAddCompanyWhitelist: [],
        needAddServiceCompanyWhitelist: []
    }
}
watch(() => props.show, async (newval) => {
    dialogVisible.value = newval
    if (newval) {
        await getInsureComponyList().then(res => {
            insureCompanyList.value = res
        })
    }
})

watch(dialogVisible, (newval) => {
    init()
    emits('update:show', newval)
})
</script>

<template>
    <el-dialog v-model="dialogVisible" title="新增禁保区域" width="920px" :destroy-on-close="true">
        <div class="w-full box-border flex items-center justify-center p-16px">
            <div class="w-120px text-end flex-shrink-0">保司：</div>
            <el-select placeholder="请选择"
                       v-model="obj.insurCompany">
                <el-option v-for="(item,i) in insureCompanyList" :key="item.dictValue" :label="item.dictLabel"
                           :value="item.dictValue"/>
            </el-select>
        </div>
        <div class="w-full box-border flex gap-8px p-16px">
            <div class="flex-1 flex flex-column gap-8">
                <div class="text-center font-bold text-24px">公司白名单</div>
                <div class="flex gap-8px w-full items-center">
                    <div class="w-120px text-end flex-shrink-0">公司：</div>
                    <el-select clearable filterable multiple remote
                               v-model="obj.needAddCompanyWhitelist"
                               :max-collapse-tags="1" collapse-tags-tooltip collapse-tags
                               reserve-keyword value-key="companyId"
                               placeholder="请选择公司" :remote-method="remoteMethod"
                               @change="changeCompanyName()"
                               :loading="loading">
                        <el-option v-for="item in companylist" :key="item.companyId"
                                   :label="item.companyName" :value="item"/>
                    </el-select>
                </div>
                <div class="flex gap-8px w-full items-center"
                     v-if="obj.companyWhitelist.length!==0">
                    <div class="w-120px text-end flex-shrink-0">已选公司：</div>
                    <div class="flex-1">
                        <ul class="infinite-list" style="overflow: auto">
                            <li v-for="(item,i) in obj.companyWhitelist"
                                :key="i"
                                class="infinite-list-item">
                                <div>
                                    {{ item.companyName }}
                                </div>
                                <el-button type="danger" size="small"
                                           @click="delCompanyWhite(item)"
                                           :icon="Delete" circle/>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="flex-1 flex flex-column gap-8">
                <div class="text-center font-bold text-24px">派遣单位白名单</div>
                <div class="flex gap-8px w-full items-center">
                    <div class="w-120px text-end flex-shrink-0">派遣单位：</div>
                    <el-select clearable filterable multiple remote
                               v-model="obj.needAddServiceCompanyWhitelist"
                               :max-collapse-tags="1" collapse-tags-tooltip collapse-tags
                               reserve-keyword value-key="companyId"
                               placeholder="请选择派遣单位" :remote-method="remoteMethodServiceCompany"
                               @change="changeServiceCompanyName()"
                               :loading="loading">
                        <el-option v-for="item in serviceCompanylist" :key="item.companyId"
                                   :label="item.companyName" :value="item"/>
                    </el-select>
                </div>
                <div class="flex gap-8px w-full items-center"
                     v-if="obj.serveCompanyWhitelist.length!==0">
                    <div class="w-120px text-end flex-shrink-0">已选派遣单位：</div>
                    <div class="flex-1">
                        <ul class="infinite-list" style="overflow: auto">
                            <li v-for="(item,i) in obj.serveCompanyWhitelist"
                                :key="i"
                                class="infinite-list-item">
                                <div>
                                    {{ item.companyName }}
                                </div>
                                <el-button type="danger" size="small"
                                           @click="delServiceCompanyWhite(item)"
                                           :icon="Delete" circle/>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <template #footer>
            <div class="flex flex-jc-c">
                <div class="flex">
                    <el-button type="primary" @click="submit">
                        确定
                    </el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </div>
            </div>
        </template>
    </el-dialog>
</template>

<style scoped lang="scss">

.infinite-list {
    min-height: 10px;
    height: 100px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.infinite-list .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 50px;
    background: var(--el-color-primary-light-9);
    margin: 10px;
    color: var(--el-color-primary);
}

.infinite-list .infinite-list-item + .list-item {
    margin-top: 10px;
}
</style>
